<template>
	<view class="menu-panel">
		<uni-grid :column="data.col" :showBorder="Boolean(data.border)">
			<uni-grid-item
					v-for="(item, index) in data.list"
					:key="index"
					@tap="handleGo(item)"
			>
				<view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
					<view class="img-box">
						<view
								v-if="item.badge.show"
								:style="[{ background: item.badge.bgColor, color: item.badge.color }]"
								class="tag-box"
						>
							{{ item.badge.text }}
						</view>
						<image :src="sheep.$url.cdn(item.src)" class="menu-image"></image>
					</view>

					<view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
						<view :style="[{ color: item.title.color }]" class="grid-text">
							<text v-if="item.title.text !== '联系IM'">{{ item.title.text }}</text>
							<!--<view
									v-else
									style="border: 1px solid transparent; width: fit-content; height: fit-content; background: transparent; font-size: 12px; padding: 0; margin: 0;"
									@click="toContact">联系IM
							</view>-->
							<button v-else class="btnStyle" open-type="contact">联系IM</button>
						</view>
						<view :style="[{ color: item.tip.color }]" class="grid-tip">
							{{ item.tip.text }}
						</view>
					</view>
				</view>
			</uni-grid-item>
		</uni-grid>
	</view>
</template>

<script setup>
import sheep from '@/sheep';
import {reactive} from "vue";

const props = defineProps({
	data: {
		type: Object,
		default() {
		},
	},
});

const state = reactive({
	defaultWechatNumber: uni.getStorageSync('defaultData').defaultWechatNumber,
	defaultWechatPic: uni.getStorageSync('defaultData').defaultWechatPic,
});

function toStorage() {
	sheep.$helper.toast('商品入库')
}

function toContact() {
	// sheep.$router.go('/pages/goods/comment/list', {})
}

function showContact() {
	let phone = null;
	const userInfo = uni.getStorageSync('userInfo');
	if (!sheep.$helper.isRealEmpty(userInfo)) {
		if (userInfo.level === 1) {
			sheep.$api.user.getDefaultCustomer().then(res => {
				phone = res;
				// 弹出联系方式弹层
				uni.showModal({
					title: '联系IM',
					content: `联系方式 - ${phone}`,
					confirmText: '复制',
					success: function (res) {
						// 复制到剪切板
						uni.setClipboardData({
							data: phone,
							success: function (res) {
								uni.showToast({
									title: '已复制到剪切板,前往搜索添加吧',
									icon: 'none'
								})
							}
						})
					}
				})
			})
		} else if (userInfo.level === 2) {
			uni.showModal({
				title: '联系IM',
				content: `联系方式 - ${userInfo.phone}`,
				confirmText: '复制',
				success: function (res) {
					// 复制到剪切板
					uni.setClipboardData({
						data: phone,
						success: function (res) {
							uni.showToast({
								title: '已复制到剪切板,前往搜索添加吧',
								icon: 'none'
							})
						}
					})
				}
			})
		} else {
			sheep.$api.user.getDefaultCustomer().then(res => {
				phone = res.data;
				// 弹出联系方式弹层
				uni.showModal({
					title: '联系IM',
					content: `联系方式 - ${phone}`,
					confirmText: '复制',
					success: function (res) {
						// 复制到剪切板
						uni.setClipboardData({
							data: phone,
							success: function (res) {
								uni.showToast({
									title: '已复制到剪切板,前往搜索添加吧',
									icon: 'none'
								})
							}
						})
					}
				})
			})
		}
	}
}

const handleGo = (item) => {
	if (item.title.text === '仓库管理' || item.title.text === '解锁平铺图') {
		const userInfo = uni.getStorageSync('userInfo');
		if (sheep.$helper.isRealEmpty(userInfo)) {
			sheep.$helper.toast('请先登录');
		} else {
			if (sheep.$helper.isRealEmpty(userInfo.gender) || userInfo.gender !== 9999) {
				// 弹窗
				uni.showModal({
					title: '权限不足',
					content: '您不是仓库管理员，无法操作商品入库',
					success: function (res) {

					}
				})
				return
			}
		}
	}
	if (item.title.text === '联系IM') {
		return
	}
	sheep.$router.go(item.url)
}

</script>

<style lang="scss" scoped>
.menu-panel {
	/* background-image: url("https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/01/140bd016097a894e33a18de250f41450b2WX20250114-221159@2x.png"); */
	background-size: 100% 60%;
	background-repeat: no-repeat;
}

.menu-image {
	width: 24px;
	height: 24px;
}

.grid-item-box {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;

	.img-box {
		position: relative;

		.tag-box {
			position: absolute;
			z-index: 2;
			top: 0;
			right: 0;
			font-size: 2em;
			line-height: 1;
			padding: 0.4em 0.6em 0.3em;
			transform: scale(0.4) translateX(0.5em) translatey(-0.6em);
			transform-origin: 100% 0;
			border-radius: 200rpx;
			white-space: nowrap;
		}
	}

	.title-box {
		.grid-tip {
			font-size: 24rpx;
			white-space: nowrap;
			text-align: center;
		}
	}
}

.btnStyle{
	border: none;
	font-size: 15px;
	padding: 0 !important;
	margin: 0;
	background-color: transparent;
	&::after{
		border:none;
	}
}
</style>
